<template>
  <el-dialog
    :title="!newValue ? '修改信息' : '添加信息'"
    :append-to-body="true"
    :visible="dialogVisible"
    @close="$emit('close')"
    custom-class="custom-dialog"
  >
    <el-form label-width="40px">
      <!-- select item -->
      <el-form-item label="项目">
        <el-select
          v-if="newItem"
          v-model="dataID"
          placeholder="请选择"
          @change="value = ''"
          style="width: 100%"
        >
          <el-option
            v-for="(item, id) in configList"
            :key="id"
            :value="id"
            :label="item"
          >
          </el-option>
        </el-select>
        <el-input disabled v-else :value="currentTitle"></el-input>
      </el-form-item>
      <!-- old value -->
      <el-form-item label="原值">
        <el-input disabled :value="valueOld"></el-input>
      </el-form-item>
      <!-- input box -->
      <inputBox :dataID="dataID" @setValue="setValue"></inputBox>
      <!-- info box -->
      <infoBox :dataID="dataID"></infoBox>
      <!-- commit button -->
    </el-form>
    <div style="text-align: right; padding-top: 12px">
      <el-button type="primary" @click="commitValue" v-if="valueChanged"
        >确定</el-button
      >
      <el-button type="text" @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import inputBox from "./inputBox.vue";
import infoBox from "./infoBox.vue";
export default {
  name: "editorView",
  components: {
    inputBox,
    infoBox,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    currentTitle: {
      type: String,
      required: false,
      default: "",
    },
    currentValue: {
      type: String,
      required: false,
      default: "",
    },
  },
  data() {
    return {
      value: "",
      dataID: 0,
    };
  },
  computed: {
    viewSize() {
      return this.$store.state.viewSize;
    },
    configList() {
      return this.$store.state.dataConfig;
    },
    valueOld() {
      if (this.currentValue != "") {
        return this.currentValue;
      }
      return "";
    },
    newValue() {
      return this.currentValue == "";
    },
    newItem() {
      return this.currentTitle == "";
    },
    dataConfig() {
      return this.configList[this.dataID];
    },
    dataType() {
      if (!this.dataConfig) return null;
      return this.dataConfig.type;
    },
    isLimited() {
      return this.dataConfig.is_limited;
    },
    valueChanged() {
      return this.value != "" && this.valueOld != this.value;
    },
  },
  methods: {
    setDataID() {
      if (!this.newItem) {
        for (let i = 0; i < this.configList.length; i++) {
          if (this.configList[i].title == this.currentTitle) {
            this.dataID = i;
          }
        }
      } else {
        this.dataID = 0;
      }
    },
    commitValue() {
      if (this.value == this.valueOld) {
        this.$emit("close");
      }
      this.$emit("commit", {
        title: this.dataConfig.title,
        value: this.value,
      });
    },
    setValue(value) {
      this.value = value;
    },
  },
  mounted() {
    this.setDataID();
    this.value = this.currentValue;
  },
};
</script>
